<template>
	<div class="tips-bar">
		<el-dialog
			v-drag-dialog
			:title="title"
			:visible.sync="dialogVisible"
			:width="width"
			:append-to-body="appendToBody"
			:modal-append-to-body="modalAppendToBody"
			:close-on-click-modal="closeOnClickModal"
			@open="handleOpenDialog"
			@close="handleCloseDialog"
		>
			<div class="flex-left-center">
				<i id="icon-bar" :class="icon" />
				<span class="content-bar">{{ messageStr }}</span>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button v-show="showCancelBtn" size="small" @click="handleCancel">取 消</el-button>
				<el-button size="small" type="primary" :loading="confirmBtnLoading" @click="handleConfirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
    export default {
        name: 'TipsDialog',
        model: {
            prop: 'dialogState',
            event: 'on-dialog-change'
        },
        props: {
            // 对话框的title
            title: {
                type: String,
                default: '提示'
            },
            // 对话框的状态
            dialogState: {
                type: Boolean,
                default: false
            },
            // 确认按钮的loading
            confirmBtnLoading: {
                type: Boolean,
                default: false
            },
            // 取消按钮的隐藏
            showCancelBtn: {
                type: Boolean,
                default: true
            },
            type: {
                type: String,
                default: 'delete'
            },
            // 对话框的内容
            message: {
                type: String,
                default: ''
            },
            // 对话框的icon图标
            icon: {
                type: String,
                default: 'el-icon-question'
            // default: 'el-icon-info'
            },
            width: {
                type: String,
                default: '400px'
            },
            // 是否可以通过点击 modal 关闭 Dialog
            closeOnClickModal: {
                type: Boolean,
                default: false
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            modalAppendToBody: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                dialogVisible: false,
                messageStr: '确认删除?'
            };
        },
        watch: {
            type(newVal) {
                if (newVal === 'delete') {
                    this.messageStr = '确认删除?';
                } else if (newVal === 'save') {
                    this.messageStr = '确认保存?';
                } else if (newVal === 'submit') {
                    this.messageStr = '确认提交?';
                } else if (newVal === 'audit') {
                    this.messageStr = '选中数据包含已审核数据，不能删除！';
                }
            },
            message: {
                handler(newVal) {
                    this.messageStr = newVal || '确认删除?';
                },
                immediate: true
            },
            dialogState(newVal) {
                this.dialogVisible = newVal;
            }
        },
        methods: {
            handleCancel() {
                this.$emit('on-visible-change', false);
                this.$emit('on-cancel', false);
            },
            handleConfirm() {
                this.$emit('on-confirm');
            },
            handleCloseDialog() {
                this.$emit('on-visible-change', false);
            },
            handleOpenDialog() {
                this.$emit('on-visible-change', true);
            }
        }
    };
</script>

<style scoped>
.tips-bar .el-dialog__body {
    padding: 10px 20px;
    /*color: #606266;*/
    font-size: 14px;
    color: #FF6600;
    word-break: break-all;
}
.content-bar {
    line-height: 34px;
    margin-left: 20px;
}

#icon-bar {
    font-size: 36px;
    /*color: #ff283a;*/
    vertical-align:middle;
    color: #FF6600;
}
.tips-bar >>> .el-dialog {
    min-width: 400px !important
}

.tips-bar >>> .el-dialog__body {
    max-height: 70vh !important;
    overflow: auto !important;
    padding: 10px 20px !important;
}
</style>
